<style>

</style>
<div class="layui-layout order-wrapper" style="padding:0 20px;">
    <div id="search-wrapper">
        <div class="layui-form">
            <div class="layui-row">
                <div class="layui-inline">
                    <select name="app" class="app" lay-verify="">
                        <option value="-1">请选择公众号</option>
                    {{range $index, $elem := .app}}
                        <option value="{{$elem.Id}}">{{$elem.AppName}}</option>
                    {{end}}
                    </select>
                </div>
                <div class="layui-inline">
                    <input type="text" class="layui-input" id="time" placeholder="请选择日期">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn search" data-type="reload">搜索</button>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-normal add">新增</button>
                </div>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="table_list" lay-filter="table_filter">
    </table>
</div>
<script src=""></script>
<script>
    layui.use(['table', 'laydate', 'form'], function () {
        var table = layui.table;
        var laydate = layui.laydate;
        var $ = layui.$;
        //方法级渲染
        table.render({
            elem: '#table_list'
            , url: '/group/table',
            where: {
                appId: $('.app').val(),
                date: $("#time").val()
            }
            , cols: [[
                {field: 'Sort', title: '序号', align: 'center', width: ''},
                {field: 'AppName', title: '公众号名称', align: 'center', width: ''},
                {
                    field: 'SendDate', title: '发布日期', align: 'center', width: '', templet: function (d) {
                        return (d.SendDate + "").split("T")[0]
                    }
                },
                {field: 'SendTime', title: '发布时间', align: 'center', width: ''},
                {
                    field: 'SendType', title: '发布形式', align: 'center', width: '', templet: function (d) {
                        if (d.SendType == 0) {
                            return "文本"
                        } else {
                            return "图文"
                        }
                    }
                },
                {field: 'HeadText', title: '内容头部', align: 'center', width: ''},
                {field: 'TailText', title: '内容尾部', align: 'center', width: ''},
                {
                    field: 'IsSend', title: '是否发送', align: 'center', width: '', templet: function (d) {
                        if (d.IsSend == 0) {
                            return "未发送"
                        } else {
                            return "已发送"
                        }
                    }
                },
                {
                    field: '', title: '操作', align: 'center', width: '', templet: function (d) {
                        if(d.IsSend == 0){
                            return `<button class="layui-btn layui-btn-xs" onclick="editTask(` + d.Id + `,'` + d.AppName + `','` + d.SendDate + `','` + d.SendTime + `',` + d.SendType + `,'` + d.HeadText + `','` + d.TailText + `')">编辑</button>
                                <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="delTask(` + d.Id + `)">删除</button>
                                <a href="/group/item?taskId=` + d.Id + `&appName=` + d.AppName +`" class="layui-btn layui-btn-normal layui-btn-xs">查看条目</a>`
                        }else{
                            return `<button class="layui-btn layui-btn-xs layui-btn-disabled" disabled>编辑</button>
                                <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="delTask(` + d.Id + `)">删除</button>
                                <a href="/group/item?taskId=` + d.Id + `&appName=` + d.AppName +`&isSend=` + d.IsSend + `" class="layui-btn layui-btn-normal layui-btn-xs">查看条目</a>`
                        }
                    }

                },
            ]]
            , id: 'listReload'
            , page: {
                curr: location.hash.replace('#!fenye=', '') //获取起始页
                , hash: 'fenye' //自定义hash值
            }
            , height: "full-200"
        });

        var active = {
            reload: function () {
                table.reload('listReload', {
                    where: {
                        appId: $('.app').val(),
                        date: $("#time").val()
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };

        //日期选择器
        laydate.render({
            elem: '#time'
            , type: 'date' //默认，可不填
        });


        $('#search-wrapper .search').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';

        });

        // $(".export").click(function(){
        //     var urlParam = "?page=1&limit=99999&startTime="+$('#start_time').val() + '&endTime=' + $('#end_time').val() + "&export=1";
        //     window.open('/operate/table'+urlParam)
        // });

        $(".add").click(function () {
            var appId = $(".app").val();
            var appName = $(".app option:selected").text();
            var isNone = $(".layui-none").length;
            if (appId == -1) {
                layer.msg("请先选择公众号");
                return
            }

            layer.open({
                area: ['500px', 'auto'],
                content: `
                    <form class="layui-form">
                      <div class="layui-form-item">
                        <label class="layui-form-label">公众号：</label>
                        <div class="layui-input-block" style="line-height: 36px;text-align: center">
                            ` + appName + `
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">发送日期：</label>
                        <div class="layui-input-block">
                          <input type="text" class="layui-input" id="time1" placeholder="请选择日期">
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">发送时间：</label>
                        <div class="layui-input-block" style="line-height: 40px;">
                           <select name="hour" id="hour" style="display: inline-block;height: 25px;">
                            <option value="-1">请选择发送时间</option>
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                          </select>
                        </div>
                      </div>

                      <div class="layui-form-item">
                        <label class="layui-form-label">发布形式：</label>
                        <div class="layui-input-block" style="line-height: 40px;">
                           <select name="type" id="type" style="display: inline-block;height: 25px;">
                            <option value="-1">请选择发布形式</option>
                            <option value="0">文本</option>
                            <!--<option value="1">图文</option>-->
                           </select>
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">内容头部：</label>
                        <div class="layui-input-block">
                          <textarea name="desc" placeholder="请输入内容" class="layui-textarea headText"></textarea>
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">内容尾部：</label>
                        <div class="layui-input-block">
                          <textarea name="desc" placeholder="请输入内容" class="layui-textarea tailText"></textarea>
                        </div>
                      </div>
                    </form>`,
                yes: function (index, layero) {
                    //do something
                    var sendDate = $("#time1").val();
                    var sendTime = $("#hour").val();
                    var sendType = $("#type").val();
                    var headText = $(".headText").val();
                    var tailText = $(".tailText").val();
                    if (sendDate == '' || sendTime == -1 || sendType == -1 || headText == '' || tailText == '') {
                        layer.msg("请输入完整内容");
                        return
                    }
                    $.ajax({
                        type: 'post',
                        url: '{{urlfor "GroupController.Add"}}',
                        data: {
                            appId: appId,
                            sendDate: sendDate,
                            sendTime: sendTime,
                            sendType: sendType,
                            headText: headText,
                            tailText: tailText
                        },
                        success: function (data) {
                            if (isNone == 1) {
                                active.reload();
                            } else {
                                $(".layui-laypage-btn").click();
                            }
                            layer.msg(data.message);
                        }
                    })
                    //layer.close(index); //如果设定了yes回调，需进行手工关闭
                }
            });

            //日期选择器
            laydate.render({
                elem: '#time1'
                , type: 'date' //默认，可不填
            });
        });

        window.editTask = function (id, appName, sendDate, sendTime, sendType, headText, tailText) {
            sendDate = sendDate.split("T")[0];
            var str = "";
            for (var i = 0; i < 24;i ++) {
                var iSSelected = "";
                if(sendTime == i){
                    iSSelected = "selected";
                }
                str += "<option value='" + i + "' " + iSSelected + ">" + i + "</option>";
            }
            var typeStr = "";
            for (var i = 0; i < 1;i ++) {
                if(sendType == i){
                    iSSelected = "selected";
                }
                typeStr = "<option value='" + i + "' " + iSSelected + "> 文本 </option>";
            }
            layer.open({
                area: ['500px', 'auto'],
                content: `
                    <form class="layui-form">
                      <div class="layui-form-item">
                        <label class="layui-form-label">公众号：</label>
                        <div class="layui-input-block" style="line-height: 36px;text-align: center">
                            ` + appName + `
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">发送日期：</label>
                        <div class="layui-input-block">
                          <input type="text" class="layui-input" id="time2" placeholder="请选择日期">
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">发送时间：</label>
                        <div class="layui-input-block" style="line-height: 40px;">
                           <select name="hour" id="hour" style="display: inline-block;height: 25px;">
                            <option value="-1">请选择发送时间</option>
                            ` + str + `
                          </select>
                        </div>
                      </div>

                      <div class="layui-form-item">
                        <label class="layui-form-label">发布形式：</label>
                        <div class="layui-input-block" style="line-height: 40px;">
                           <select name="type" id="type" style="display: inline-block;height: 25px;">
                            <option value="-1">请选择发布形式</option>
                            ` + typeStr + `
                           </select>
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">内容头部：</label>
                        <div class="layui-input-block">
                          <textarea name="desc" placeholder="请输入内容" class="layui-textarea headText">`+headText+`</textarea>
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">内容尾部：</label>
                        <div class="layui-input-block">
                          <textarea name="desc" placeholder="请输入内容" class="layui-textarea tailText">`+tailText+`</textarea>
                        </div>
                      </div>
                    </form>`,
                yes: function (index, layero) {
                    //do something
                    var sendDate = $("#time2").val();
                    var sendTime = $("#hour").val();
                    var sendType = $("#type").val();
                    var headText = $(".headText").val();
                    var tailText = $(".tailText").val();
                    // console.log(sendDate,sendTime,sendType,headText,tailText);
                    if (sendDate == '' || sendTime == -1 || sendType == -1 || headText == '' || tailText == '') {
                        layer.msg("请输入完整内容");
                        return
                    }

                    $.ajax({
                        type: 'post',
                        url: '{{urlfor "GroupController.Edit"}}',
                        data: {
                            id:id,
                            sendDate: sendDate,
                            sendTime: sendTime,
                            sendType: sendType,
                            headText: headText,
                            tailText: tailText
                        },
                        success: function (data) {
                            $(".layui-laypage-btn").click();
                            layer.msg(data.message);
                        }
                    })
                    //layer.close(index); //如果设定了yes回调，需进行手工关闭
                }
            });

            //日期选择器
            laydate.render({
                elem: '#time2'
                , type: 'date',//默认，可不填
                value: sendDate
            });
        }


    });


    function delTask(id) {
        layer.open({
            title: '提示',
            content: '确定要删除此任务？',
            yes: function (index, layero) {
                //do something
                $.ajax({
                    type: 'post',
                    url: '{{urlfor "GroupController.Del"}}',
                    data: {id: id},
                    success: function (data) {
                        if (data.status == 0) {
                            $(".layui-laypage-btn").click();
                            layer.msg(data.message);
                        } else {
                            layer.msg(data.message);
                        }
                    }
                });
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    }


</script>